import React, { Component } from 'react';
import { Form, Modal, Input, Radio, Button, message, } from 'antd';
import url from '../../../../config/url';
import req from "../../../../http/req"
class Xiugai extends Component {
  constructor(props) {
    super(props);
    this.formRef = React.createRef();
    this.state = {
      visible: false,
    }
  }
  handleOk = e => {
    this.setState({
      visible: false,
    });
  };

  handleCancel = e => {
    this.setState({
      visible: false,
    });
  };
  onFinish = values => {
    // console.log('Success:', values);
    req.put(url.Deletedel + `/${values.id}`, {
      id: values.id, 
      username: values.username,
      password: values.password,
      email: values.email,
      status: values.status,
      gender: values.gender,
      mobile: values.mobile,
    }).then(rest => {
      // console.log(rest);
      if (rest.data.errNo === 0) {
        message.success('修改成功')
        this.setState({
          visible: false
        })
      }

    })
  };

  onFinishFailed = errorInfo => {
    // console.log('Failed:', errorInfo);
  };


  render() {
    return (
      <div>
        <button onClick={() => {
          // console.log(this.props.fn());
          this.setState({
            visible: true
          },
            () => {
              if (this.formRef.current) {
                this.formRef.current.setFieldsValue({
                  id: this.props.fn().id,
                  username: this.props.fn().username,
                  email: this.props.fn().email,
                  status: this.props.fn().status,
                  gender: this.props.fn().gender,
                  mobile: this.props.fn().mobile,
                });
              }
            });
        }}>修改</ button>
        <Modal
          title="Basic Modal"
          visible={this.state.visible}
          onOk={this.handleOk}
          onCancel={this.handleCancel}
          forceRender={true}
        >
          <Form
            name="basic"
            ref={this.formRef}
            onFinish={this.onFinish}
            onFinishFailed={this.onFinishFailed}
          >
            <Form.Item
              name='id'
              label="序号"
            >
              <Input />
            </Form.Item>
            <Form.Item
              name='username'
              label="用户名"
              rules={[
                {
                  required: true,
                },
              ]}
            >
              <Input />
            </Form.Item>
            <Form.Item
              name='password'
              label="密码"
              rules={[
                {
                  required: true,
                },
              ]}
            >
              <Input />
            </Form.Item>
            <Form.Item
              name='email'
              label="邮箱"
              rules={[
                {
                  type: 'email'
                },
              ]}
            >
              <Input />
            </Form.Item>
            <Form.Item
              label="性别"
              name='gender'
            >
              <Radio.Group>
                <Radio value="1"> 男 </Radio>
                <Radio value="2"> 女 </Radio>
                <Radio value="3"> 保密 </Radio>
              </Radio.Group>
            </Form.Item>
            <Form.Item
              label="状态"
              name='status'
            >
              <Radio.Group>
                <Radio value="1"> 正常 </Radio>
                <Radio value="2"> 禁用 </Radio>
              </Radio.Group>
            </Form.Item>
            <Form.Item
              name='mobile'
              label="手机号">
              <Input />
            </Form.Item>
            <Form.Item >
              <Button type="primary" htmlType="submit">
                确认修改
              </Button>
            </Form.Item>

          </Form>
        </Modal>
      </div>
    );
  }
}
export default Xiugai;
